import React, { Component } from 'react';

//知识点: 在类组件中使用state 这个属性去定义响应式数据
class Mycls extends Component {
    // 第一种方式: 在初始化constructor中定义数据
    constructor() {
        super()
        // console.log('this1', this);
        // this.state = {
        //     username: '豹子头-林冲'
        // }
    }
    //第二种方式: 以类成员属性的形式定义state 推介该种方式定义
    state = {
        username: '豹子头-林冲',
        age: 38
    }
    render() {
        // let username = '张三'
        console.log('this2', this);
        return (
            <div>
                {/* <p onClick={() => { username = '李四'; console.log(username); }}>{username}</p> */}
                <p onClick={this.edit}>{this.state.username}--{this.state.age}</p>
            </div>
        );
    }
    edit = () => {
        // console.log(this);
        // 修改state 的状态
        // 只能通过this.setState()修改数据,因为react中的响应数据并没有使用类似vue中object.defineProperty
        // 循环data中的数据绑定get 和set 方法
        // this.state.username = '花和尚-鲁智深'
        this.setState({
            username: '花和尚-鲁智深'
        })
    }


}

export default Mycls;
